AR Clip SDK

Unity で作った AR の体験を、AR Clip の App Clip として開けるようにします。WebGL のコンテンツはストリーミングで読み込まれ、位置の特定（ローカライズ）は ARKit と AR Clip VPS が行います。

始める前に

• Unity 2020 LTS 以降（2021 以降で動作確認済み）
• WebGL のビルドターゲット
• AR Clip の zip アップローダー へのアクセス

テストはスマートフォンで

Unity Editor では、AR Clip の API のほとんどが Application.isEditor で囲まれています。実際のトラッキングを試すには、WebGL でビルドし、AR Clip のモバイルアプリでテストしてください。

パッケージをインストールする

1. Window → Package Manager を開きます。
2. + → Add package from Git URL… をクリックします。
3. https://github.com/WebAR-Studio/arclip_sdk.git を貼り付けて確定します。

インポートする前に、古い Assets/ARLib フォルダーがあれば削除してください。残っていると、次のようなシンボルの重複エラーが出ます。

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

サンプルをインポートする

Package Manager → AR Clip → Samples で次の操作をします。

• WebGLTemplates をインポートし、作成されたフォルダーを Assets/ の直下にコピーします。すると、Project Settings → Player → WebGL Template に表示されるようになります。
• TransparentBackground をインポートし、TransparentBackground.jslib を Assets/Plugins に移動します。これで WebGL の背景が透明になります。

シーンを準備する

1. ARClipController という名前の空の GameObject を追加します。
2. そこに ARLibController を追加し、renderCamera フィールドにカメラを割り当てます。
3. その GameObject の Camera コンポーネントをオフにします。Clear Flags = Solid Color に設定し、背景には RGBA(0,0,0,0) を使います。
4. 任意：Editor でネイティブのコールバックをシミュレートするには、ARLibTester（Samples に含まれています）を追加します。

最小限のブートストラップスクリプト

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

VPS のローカライズを開始する

VPS の設定は、初期化のあと、ローカライズを始める前に行います。

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

次のイベントを受け取ります。

• ARLibController.VPSInitialized — VPS の準備ができました。
• ARLibController.VPSPositionUpdated — ローカライズで新しいポーズが得られました。
• ARLibController.OnVPSErrorHappened — エラーが起きました。内容は文字列で届きます。

特定のロケーションでリクエストを送る頻度を調整するには、SetSendPhotoDelay、SetGpsAccuracyBarrier、SetFirstRequestDelay を使います。

画像と平面のトラッキング

• 画像は、トラッキングをオンにする前に AddTrackingImage で登録します。読み込みが終わったことは、TrackedImagesArrayUpdate を待って確認します。
• 平面を検出するには EnableSurfaceTracking("horizontal" | "vertical" | "both") を呼び出します。結果は SurfaceTrackingUpdated で届きます。

ビルドとアップロード

1. WebGL テンプレートを選ぶ。 Project Settings → Player → WebGL → Resolution and Presentation で、パッケージからコピーしたテンプレートを選びます。
2. ビルドする。 File → Build Settings → WebGL → Build を使います。
3. zip にする。 index.html が zip のルートに来るようにビルドを圧縮します。
4. アップロードする。 zip アップローダー でアーカイブをアップロードします。
5. テストする。 表示された QR コードを AR Clip の iOS アプリ で読み取ります。

トラブルシューティング

• WebGL でカメラの映像が出ない。 TransparentBackground.jslib が Assets/Plugins にあること、レンダーカメラが割り当てられていて、しかもオフになっていることを確認してください。
• Editor のプレイモードで AR のイベントが来ない。 これは想定どおりの動作です。ARLibTester を使うか、WebGL でビルドして実際のデータで試してください。
• シンボルの重複エラーが出る。 パッケージをインポートする前に、古い ARLib フォルダーを削除したか確認してください。